<!DOCTYPE html>
<html lang="eng">
	<head>
		<title>User Form</title>		
		<meta name="description" value="Timely is a..." />
		<meta name="keywords" value="" />
		<meta name="author" value="" />
		<meta charset="utf-8" />
		
		<link rel="stylesheet" href="/css/base.css"></link>
		
		<script type="text/javascript">
			var control = new Control();
			
			function Control(){
				var videos = [];
				
				this.restartVideo = function(videoId){
					videos[videoId].hideMask();
					videos[videoId].restart();
				}
				
				this.doYouHave = function(videoId){
					if(videos[videoId]){
						return true;
					}
				}
				
				this.addVideo = function(videoId){
					videos[videoId] = new Video(videoId);
				}
				
				this.getVideo = function(videoId){
					return videos[videoId];
				}
				
				this.answerSurvey = function(videoId){
					return;
				}
				
			}
			
			function Video(videoId){
				var _videoId = videoId;
				var _mask = new VideoMask(videoId);				
				var _videoObj = document.getElementById(videoId);
				
				this.renderMask = function(){
					return _mask.render();
				}
				this.hideMask = function(){
					_mask.hide();
				}
				this.restart = function(){
					_videoObj.currentTime = 0;
					_videoObj.play();
				}
				this.ended = function(){
					return _videoObj.ended;
				}
			}
		
			function VideoMask(videoId){
				var _videoId = videoId;
				var _renderObj = null;
				
				this.render = function(){
					if(_renderObj!=null){
						return _renderObj;
					}
									
					
					var vm = document.createElement("div");
					vm.setAttribute("class","videoMask");
					
					var con = document.createElement("div");
					con.setAttribute("class","maskControl");
					
						var al = document.createElement("a");			
						al.setAttribute("href","javascript:control.restartVideo(\"" + _videoId + "\");");
						
							var ml = document.createElement("div");
							ml.setAttribute("class","maskLeft" );
							
								var dl = document.createElement("div");
								dl.setAttribute("class","controlIcon controlIconLeft");
								var labell = document.createElement("label");
								labell.appendChild(document.createTextNode("Restart"));
								
							ml.appendChild(dl);
							ml.appendChild(labell);
						al.appendChild(ml);
						
						var ar = document.createElement("a");			
						ar.setAttribute("href","javascript:control.answerSurvy(\"" + _videoId + "\");");
						
							var mr = document.createElement("div");
							mr.setAttribute("class","maskRight" );
							
								var dr = document.createElement("div");
								dr.setAttribute("class","controlIcon controlIconRight");
								var labelr = document.createElement("label");
								labelr.appendChild(document.createTextNode("Answer Survey"));					
							
							mr.appendChild(dr);
							mr.appendChild(labelr);
						ar.appendChild(mr);								
				
					con.appendChild(al);
					con.appendChild(ar);
					vm.appendChild(con);
					
					_renderObj = vm;
					
					var p = document.getElementById(_videoId).parentNode;
					p.appendChild(_renderObj);					
				}
				
				this.hide = function(){
					document.getElementById(_videoId).parentNode.removeChild(_renderObj);
					_renderObj=null;
				}
			}
		
			
			function videoStart(ev){
				if(!control.doYouHave(ev.target.id)){
					control.addVideo(ev.target.id);
				}
			}
			
			function endVideo(ev){
				control.getVideo(ev.target.id).renderMask();
			}
			
			function load(){
				var v = document.getElementById("meuVideo");
				v.addEventListener("ended",endVideo);
				v.addEventListener("play",videoStart);
			}

		</script>

	</head>
	
	<body onLoad="load()">
		
		<div id="all">
			<div id="top">
				<div id="topContainer">
					<div id="logo">Timely</div>
					<div id="menu">
						<div class="boxMenu"><a href="">Home</a></div>
						<div class="boxMenu"><a href="">How it works</a></div>
						<div class="boxMenu"><a href="">Join</a></div>											
					</div>
				</div>
			</div>
			
			<div id="middle">
				<div id="content">
				
				
					<div class="jackpotRow">
					
						<div class="jackpotLeft">
							<div class="statsBox">
								<img src="/images/cifrao_small.png" />
								<div>1,250.34</div>
							</div>
							
							<div class="statsBox">
								<img src="/images/tv_small.png" />
								<div>733,791</div>		
							</div>
							
							<div class="statsBox">
								<img src="/images/like_small.png" />
								<div>251,345</div>							
							</div>
						</div>
						
						<div class="jackpotCenter">
							<div class="player" style="position:relative">
								<video width="640" id="meuVideo" height="360" controls="controls" onEnded="endVideo">
									<source src="videos/mov_bbb.mp4" type="video/mp4">
									<source src="videos/mov_bbb.ogg" type="video/ogg">
								</video>
							</div>
							
							<div class="comments">
								<div class="commentRow">
									<span>My comment about the video...</span>
									<a href="">Like</a>
								</div>
								
								<div class="commentRow">
									<span>My comment about the video...</span>
									<a href="">Like</a>
								</div>								
							</div>
							
						</div>
						
						<div class="jackpotRight">
							<a href="http://www.cocacola.com" target="_blank"><img src="images/coke_banner.png" /></a>
						</div>
					
					</div>
					

				
				</div>
			</div>
			
			<div id="bottom">
			
			</div>
		</div>
	</body>
	
</html>